<div class="License-container"
	ng-class="{'License-container--missing': licenseMissing}">
	<div class="License-details" ng-hide="licenseMissing">
		<div class="card at-Panel">
			<div class="List-titleText" translate>Details</div>
			<div class="License-fields">
				<div class="License-field">
					<div class="License-field--label" translate>License</div>
					<div class="License-field--content">
					<span class="License-greenText" ng-show='compliant'><i class="fa fa-circle License-greenText"></i><translate>Valid License</translate></span>
					<span class="License-redText" ng-show='!compliant'><i class="fa fa-circle License-redText"></i><translate>Invalid License</translate></span>
					</div>
				</div>
				<div class="License-field">
					<div class="License-field--label" translate>Version</div>
					<div class="License-field--content">
					{{license.version}}
					</div>
				</div>
				<div class="License-field">
					<div class="License-field--label" translate>License Type</div>
					<div class="License-field--content">
					{{license.license_info.license_type}}
					</div>
				</div>
				<div class="License-field">
					<div class="License-field--label" translate>Subscription</div>
					<div class="License-field--content">
					{{license.license_info.subscription_name}}
					</div>
				</div>
				<div class="License-field">
					<div class="License-field--label" translate>License Key</div>
					<div class="License-field--content License-field--key">
					{{license.license_info.license_key}}
					</div>
				</div>
				<div class="License-field">
					<div class="License-field--label" translate>Expires On</div>
					<div class="License-field--content">
					{{time.expiresOn}}
					</div>
				</div>
				<div class="License-field">
					<div class="License-field--label" translate>Time Remaining</div>
					<div class="License-field--content"
						ng-class="{'License-redText': time.remaining=='0 Days'}">
					{{time.remaining}}
					</div>
				</div>
				<div class="License-field">
					<div class="License-field--label" translate>Hosts Available</div>
					<div class="License-field--content">
					{{license.license_info.available_instances}}
					</div>
				</div>
				<div class="License-field">
					<div class="License-field--label" translate>Hosts Used</div>
					<div class="License-field--content">
					{{license.license_info.current_instances}}
					</div>
				</div>
				<div class="License-field License-greenText">
					<div class="License-field--label" translate>Hosts Remaining</div>
					<div class="License-field--content">
					{{license.license_info.free_instances}}
					</div>
				</div>
			</div>
			<div class="License-upgradeText" translate>If you are ready to upgrade, please contact us by clicking the button below</div>
			<a href="https://www.ansible.com/renew" target="_blank"><button class="btn btn-primary" translate>Upgrade</button></a>
		</div>
	</div>
	<div class="License-management" ng-class="{'License-management--missingLicense' : licenseMissing}">
		<div class="card at-Panel">
			<div class="List-titleText">{{title}}</div>
			<div class="License-body">
				<div class="License-helperText" ng-if="licenseMissing" translate>Welcome to Ansible Tower! Please complete the steps below to acquire a license.</div>
				<div class="AddPermissions-directions" ng-if="licenseMissing">
					<span class="AddPermissions-directionNumber">
						1
					</span>
					<span class="License-helperText">
						<translate>Please click the button below to visit Ansible's website to get a Tower license key.</translate>
					</span>
				</div>

					<button class="License-downloadLicenseButton btn btn-primary" ng-if="licenseMissing" ng-click="downloadLicense()">
						<translate>Request License</translate>
					</button>

				<div class="AddPermissions-directions">
					<span class="AddPermissions-directionNumber" ng-if="licenseMissing">
						2
					</span>
					<span class="License-helperText">
						<translate>Choose your license file, agree to the End User License Agreement, and click submit.</translate>
					</span>
				</div>

				<form id="License-form" name="uploadlicense">
					<div class="License-subTitleText">
						<span class="Form-requiredAsterisk">*</span>
						<translate>License File</translate>
					</div>
					<div class="input-group License-file--container">
						<span class="btn btn-primary" ng-click="fakeClick()" ng-disabled="!user_is_superuser" translate>Browse</span>
                        <span class="License-fileName" ng-class="{'License-helperText' : fileName == 'No file selected.'}">{{fileName|translate}}</span>
						<input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
					</div>
					<div class="License-subTitleText">
						<span class="Form-requiredAsterisk">*</span>
						<translate>End User License Agreement</translate>
					</div>
					<div id="eula_notice"
						class="License-eulaNotice">{{ license.eula }}</div>
					<div class="form-group License-detailsGroup">
						<div class="checkbox">
							<label class="License-details--label">
								<input type="checkbox" ng-model="newLicense.eula" ng-disabled="!user_is_superuser" required>
								<translate>I agree to the End User License Agreement</translate>
							</label>
						</div>
					</div>
					<div class="form-group License-detailsGroup License-detailsGroup--withSeparator" ng-if="licenseMissing">
						<div class="checkbox">
							<label class="License-details--label">
								<input type="checkbox" ng-model="newLicense.pendo" ng-disabled="!user_is_superuser" required>
								<translate>By default, Tower collects and transmits analytics data on Tower usage to Red Hat. This data is used to enhance future releases of the Tower Software and help streamline customer experience and success. For more information, see
										<a target="_blank"
												href="http://docs.ansible.com/ansible-tower/latest/html/installandreference/user-data.html#index-0">
												this Tower documentation page
										</a>.  Uncheck this box to disable this feature.
								</translate>
							</label>
						</div>
					</div>
					<div>
						<button ng-click="submit()" class="btn btn-success pull-right" ng-disabled="newLicense.file.license_key == null || newLicense.eula == null || !user_is_superuser" translate>Submit</button>
						<span ng-show="success == true" class="License-greenText License-submit--success pull-right" translate>Save successful!</span>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
